<template>
    <div class="checkup-record-container">
        <div class="search-filter-module">
            <el-input
                    placeholder="搜索宠物名称/主人信息"
                    v-model="searchQuery.petName"
                    class="search-input"
                    prefix-icon="el-icon-search"
                    @keyup.enter="handleSearch"
            ></el-input>
            <el-button type="primary" class="search-button" @click="handleSearch">搜索</el-button>
        </div>
        <div class="filter-module">
            <el-radio-group v-model="choseDate1" class="filter-group">
                <el-radio-button label="全部" @click="choseFilter(null)">全部</el-radio-button>
                <el-radio-button label="今日" @click="choseFilter(1)">今日</el-radio-button>
                <el-radio-button label="本周" @click="choseFilter(7)">本周</el-radio-button>
                <el-radio-button label="本月" @click="choseFilter(30)">本月</el-radio-button>
                <el-radio-button label="本月" @click="searchQuery.dateRange=30" v-show="false">本月</el-radio-button>
            </el-radio-group>
            <el-radio-group v-model="choseDate2" class="filter-group">
                <el-radio-button label="常规体检" @click="searchQuery.type=1" v-show="false">1</el-radio-button>
                <el-radio-button label="常规体检" @click="choseFilter2(1)">常规体检</el-radio-button>
                <el-radio-button label="专项检查" @click="choseFilter2(2)">专项检查</el-radio-button>
            </el-radio-group>
            <el-button type="danger" @click="clean()" style="margin-top: 5px">清空</el-button>
        </div>
        <div class="record-list-module">
            <div class="record-item" v-for="record in records" :key="record.id">
                <div class="record-header">
                    <img :src="record.mainImg" alt="pet-image" class="pet-image"/>
                    <div class="record-info">
                        <h3>{{ record.petName }}</h3>
                        <p>{{ record.specis }} - {{ record.age }}岁</p>
                        <div style="display: flex;gap: 20px">
                            <div style="display: flex;gap: 5px">
                                <ScheduleFilled style="color: #727272;font-size: large;margin-top: 5px"/>
                                <p>{{ record.createdAt }}</p></div>

                            <div style="display: flex;gap: 5px">
                                <MehFilled style="color: #727272;font-size: large;margin-top: 5px"/>
                                <span>{{ record.docName }}医生</span>
                            </div>
                            <div class="record-footer">{{ record.diagResult }}</div>
                        </div>
                    </div>
                </div>
                <div class="Img" @click="openReport(record)">
                    <img src="../assets/img/arrow.png" class="img"/>
                </div>
            </div>
        </div>
        <el-dialog v-if="dialogVisible" v-model="dialogVisible">
            <el-container>
                <el-header>
                    <h2>体检报告</h2>
                    <p>登记号：PET{{ formReport.reportTime }}</p>
                    <p>创建时间：{{ formReport.createdAt }}</p>
                    <el-tag type="success">健康</el-tag>
                </el-header>

                <el-main style="margin-top: 50px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-card>
                                <div>体重</div>
                                <div> {{ formReport.weight }}kg</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>体温</div>
                                <div>{{ formReport.temperature }}°C</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>心率</div>
                                <div>{{ formReport.heartRate }}次/分钟</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>呼吸频率</div>
                                <div>{{ formReport.respiratoryRate }}次/分钟</div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="6">
                            <el-card>
                                <div>血压</div>
                                <div>{{ formReport.bloodPressure }} mmHg</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <div>身高</div>
                                <div>{{ formReport.height }}cm</div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-divider style="margin-top: 20px;"></el-divider>

                    <el-collapse>
                        <el-collapse-item title="血液检查结果" name="1">
                            <div>{{ formReport.bloodtestResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="尿液检查结果" name="2">
                            <div>{{ formReport.urinetestResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="X光检查结果" name="3">
                            <div>{{ formReport.xrayResults }}</div>
                        </el-collapse-item>
                        <el-collapse-item title="超声波结果" name="4">
                            <div>{{ formReport.ultrasoundResults }}</div>
                        </el-collapse-item>
                    </el-collapse>

                    <el-divider style="margin-top: 20px;"></el-divider>

                    <el-card>
                        <h3>诊断结果</h3>
                        <p>
                            {{ formReport.diagResult }}
                        </p>
                        <h3>治疗方案</h3>
                        <p>
                            {{ formReport.treatmentPlan }}
                        </p>
                        <h3>备注</h3>
                        <p>
                            {{ formReport.notes }}
                        </p>
                    </el-card>
                </el-main>
            </el-container>
        </el-dialog>

        <el-button type="primary" class="add-record-btn" @click="addRecord">新增记录</el-button>
    </div>
</template>

<script>
import {searchHealthExaminationRecordList} from "@/api/petApi";
import {parseTime, parseTime2, parseTime4, parseTime5} from "@/utils/timeUtil";
import {MehFilled, ScheduleFilled} from "@ant-design/icons-vue";

export default {
    components: {MehFilled, ScheduleFilled},

    data() {
        return {
            formReport: {},
            dialogVisible: false,
            choseDate1: null,
            choseDate2: null,
            searchQuery: {
                petName: null,
                dateRange: null,
                type: null,
            },
            records: []
        };
    },

    methods: {
        choseFilter(value) {
            this.searchQuery.dateRange = value
            this.handleSearch()
        },
        choseFilter2(value) {
            this.searchQuery.dateRange = value
            this.handleSearch()

        },
        openReport(item) {
            this.formReport = item
            this.dialogVisible = true
        },
        clean() {
            this.searchQuery = {}
            this.choseDate1 = null
            this.choseDate2 = null
        },
        handleSearch() {
            searchHealthExaminationRecordList(this.searchQuery).then(res => {
                res.data.forEach(v => {
                    v.reportTime = parseTime4(v.createdAt)
                    v.createdAt = parseTime5(v.createdAt)
                    v.docName = v.docName?.substring(0, 1)
                    v.docName = v.docName?.substring(0, 1)
                })
                this.records = res.data
            })
        },
        addRecord() {
            // 在这里添加新增记录的逻辑
        }
    }, mounted() {
        this.handleSearch()
    }
};
</script>

<style scoped>
.checkup-record-container {
    padding: 20px;
}

.search-filter-module {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.search-input {
    flex: 1;
    margin-right: 10px;
}

.search-button {
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.search-button:hover {
    background-color: #0056b3;
}

.filter-module {
    margin-bottom: 20px;
}

.record-list-module {
    border-top: 1px solid #ebeef5;
}

.record-item {
    display: flex;
    border-bottom: 1px solid #ebeef5;
    padding: 20px 0;
}

.record-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.pet-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.record-info h3 {
    margin: 0;
    font-size: 16px;
}

.record-info p {
    margin: 5px 0;
    color: #666;
}

.record-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #999;
}

.add-record-btn {
    margin-top: 20px;
    display: block;
}

.Img {
    margin-top: 20px;
    display: flex;
    float: right;
    margin-left: auto;
}

.img {
    width: 20px;
    height: 20px;
    display: flex;
}
</style>